<template>
<div class="bind-mobile abs full">
	<div class="rel full overflow-x-hidden">
		<div class="head-portrait">
			<img v-if="src==''" src="./image/bg-circle.png">
			<img v-if="src!=''" :src="src">
		</div>
		<!-- 没有绑定手机号 -->
		<div v-if="!isMobileBind" v-cloak>
			<div class="head-bottom-msg">绑定手机，可享受更多会员特权</div>
			<div class="rel account-input">
				<input type="text" placeholder="请输入手机号" maxlength="11" id="phoneNumber" v-model="mobile">
				<div class="abs phone-input-remove" v-if="mobile" @click="removeContent()">
					<div class="phone-input-remove-img"></div>
				</div>
			</div>
			<div class="input-verification-code">
				<input type="text" placeholder="请输入验证码" id="psw" v-model="verificationCode">
				<span id="getVerCode" class="get-verification-code" @click="getVerificationCodeFlag && getVerificationCode()">{{'获取验证码'}}</span>
			</div>
			<div class="agree-agreement">
				<div @click="agreeAgreement()" class="select-btn">
					<img src="./image/unagree-agreement.png" v-show="agreeButton">
					<img src="./image/agree-agreement.png" v-show="!agreeButton">
				</div>
				<span class="agree-agreement-msg" @click="agreeAgreement()">我已阅读并同意相关</span><span class="agreement" @click.self="agreementDetailOpen()">隐私及协议条款</span>
			</div>
			<div class="bind-mobile-number" @click="bindMobileNum()">绑定手机号</div>
		</div>
		<div v-else v-cloak>
			<div class="head-bottom-msg">您已经绑定手机，点击<span class="clickBack" @click="back()">返回</span></div>
		</div>
	</div>
	<!-- 用户服务协议遮罩层 -->
	<div class="agreement-detail-box" v-show="agreementDetail">
		<div class="agreement-detail">
			<div class="agree-detail-head"><span>用户服务协议</span><span class="agreement-detail-close" @click="agreementDetailOpen()"></span></div>
			<ul>
				<li v-for="item in userAgreement" :key="item.title">
					<p class="agreement-detail-title" v-text="item.title"></p>
					<p v-text="item.content"></p>
				</li>
			</ul>
		</div>
	</div>
</div>
</template>

<script>
export default {
	name: 'bind-mobile',
	data() {
		return {
			isMobileBind: '',
			src: '',
			agreeButton: true, //同意条款按钮切换flag
			mobile: '', //手机号内容
			verificationCode: '', //手机验证码
			getVerificationCodeFlag: true, //获取验证码按钮flag
			exp: '',
			token: '',
			agreementDetail: false, // 用户服务条款遮罩层flag
			userAgreement: [{
				title: '一、特比别提醒',
				content: '用户确认接受：本协议条款及全部补充或修订条款是处理双方权利义务及争议的依据，在您成为智能保险专家网络平台用户后，始终有效。'
			}, {
				title: '二、服务内容',
				content: '智能保险专家网络平台，包括但不限于智能保险专家运营的网站、APP和微信公众号，致力于为平台注册用户提供保险产品信息服务。'
			}, {
				title: '三、注册条款',
				content: '基于智能保险专家网络平台所提供服务的重要性，用户注册时承诺提供的个人资料准确、详尽。用户个人资料发生变更，应及时更新注册信息。'
			}, {
				title: '四、账户管理',
				content: '注册成为智能保险专家用户后，用户对用户名和密码安全全部负责，对以其用户名进行的所有活动和事件负责。'
			}, {
				title: '五、智能保险专家网络平台使用规范',
				content: '用户在使用智能保险专家网络服务时，应遵守国家《计算机信息系统国际联网保密管理规定》、《中华人民共和国计算机信息系统安全保护条例》、《计算机信息网络国际联网安全保护管理办法》等相关法律法规及职能保险专家在平台上不是发布的使用规范。'
			}, {
				title: '六、用户权利和义务',
				content: '用户在遵守用户协议的前提下，有权对智能保险专家提供的网络服务进行监督和批评。智能保险专家欢迎用户提出服务改进建议，并承诺积极采取措施改善相应服务。'
			}, {
				title: '七、责任声明',
				content: '用户对智能保险专家网络平台的使用承担全部风险。智能保险专家对比不作任何类型的担保，不论是明确的或隐含的。'
			}, {
				title: '八、知识产权声明',
				content: '智能保险专家网络平台所有可阅读的资料都受《中华人民共和国著作权法》及相关法律法规保护。'
			}, {
				title: '九、协议终止',
				content: '用户对本协议及其补充、修改条款，对智能保险专家网络平台中断一项或多项网络服务事宜有异议，或对智能保险专家的服务不满，可以行使如下权利：1.停止使用智能保险专家的网络服务；2.通告智能保险专家停止对该用户的服务。智能保险专家结束用户服务后，用户使用网络服务的权利马上终止。用户无权要求智能保险专家向其继续提高网络平台服务。'
			}, {
				title: '十、法律使用及管辖',
				content: '本协议条款的解释及适用，以及与本协议条款有关的争议，均应依照中国人民共和国法律予以处理，并以智能保险专家所在地人民法院为管辖法院。本协议解释权及修订权归智能保险专家所有。'
			}] // 用户服务条款
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.bindMobile = this;
	},
	activated() {
		document.title = '绑定手机';
		this.getCustomerDetail();
	},
	deactivated() {
		this.isMobileBind = '';
		this.src = '';
		this.agreeButton = true; //同意条款按钮切换flag
		this.exp = '';
		this.token = '';
		this.agreementDetail = false // 用户服务条款遮罩层flag
	},
	methods: {
		// 获取用户头像
		getCustomerDetail() {
			// 获取用户ID
			let customerId = this.$util.getCustomerId();
			if (!customerId) {
				return;
			}
			let that = this;
			this.$util.ajax(`/customer/detail`, 'post', {
				customerId: customerId
			}).then(function(data) {
				if (data.code == "100000") {
					console.log(data);
					that.src = data.data.avatarUrl;
					that.isMobileBind = data.data.isMobileBind;
				}
			}).catch(function(err) {
				console.log(err);
			});
		},
		// 如果已经绑定手机号，点击返回
		back() {
			console.log(this);
			window.history.go(-1);
		},
		// 删除输入框内容
		removeContent() {
			this.mobile = '';
			this.verificationCode = '';

		},
		// 同意条款与协议按钮
		agreeAgreement() {
			this.agreeButton = !this.agreeButton;
		},
		// 显示用户服务条款遮罩层
		agreementDetailOpen() {
			this.agreementDetail = !this.agreementDetail;
		},
		// 获取验证码
		getVerificationCode() {
			// 验证手机号码格式
			var phoneReg = /^1[34578][0-9]{9}$/;
			if (phoneReg.test(this.mobile)) {
				var that = this;
				this.$util.ajax(`/verifycode/sendVerifyCode`, 'post', {
					mobile: this.mobile
				}, 'protect').then(function(data) {
					console.log('获取验证码返回值：');
					console.log(data);
					that.bindMobileMsg = data.message;
					if (data.code == "100000") {
						that.exp = data.data.exp;
						that.token = data.data.token;
						// 读秒操作
						let second = 60;
						let getVerCode = document.getElementById('getVerCode');
						var timer = setInterval(() => {
							second--;
							if (second > 0) {
								let ttext = '剩余' + second + '秒';
								getVerCode.style.color = '#ccc';
								getVerCode.innerHTML = ttext;
								that.getVerificationCodeFlag = false
							} else {
								getVerCode.style.color = '';
								getVerCode.innerHTML = '获取验证码';
								that.getVerificationCodeFlag = true;
								clearInterval(timer);
							}
						}, 1000);
					}
				}).catch(function(err) {
					console.log(err);
				});
			} else {
				this.showAlert('手机号为空或格式不正确', 'error');
			}
		},
		// 绑定手机号按钮
		bindMobileNum() {
			let customerId = this.$util.getCustomerId();
			if (!customerId) {
				return;
			}
			// 验证手机号码格式
			var phoneReg = /^1[34578][0-9]{9}$/;
			if (this.mobile != '') {
				if (phoneReg.test(this.mobile) && this.verificationCode != '') {
					if (this.agreeButton == false) {
						var that = this;
						this.$util.ajax(`/customer/mobile/bind`, 'post', {
							mobile: this.mobile,
							customerId: customerId, //用户ID
							inviteCode: '',
							verificationCode: this.verificationCode, //验证码
							exp: this.exp,
							token: this.token
						}, 'protect').then(function(data) {
							console.log('绑定手机号返回值：');
							console.log(data);
							if (data.code == "100000") {
								setTimeout(function() {
									that.showToast();
									that.$router.push('/user-center');
								}, 1000);
							}
						}).catch(function(err) {
							console.log(err);
						});
					} else {
						this.showToast('请同意服务条款', 'warning');
					}
				} else {
					this.showToast('手机号或验证码不正确', 'error');
				}
			}
		}
	}
}
</script>

<style scoped>
.bind-mobile {
	font-size: .3rem;
	background: url(../detail/image/star_bg.png) no-repeat;
	background-size: 100% 100%;
	color: #F6F6F6;
}

.head-portrait,
.head-bottom-msg,
.account-input,
.input-verification-code,
.agree-agreement {
	margin-top: .5rem;
}

.head-bottom-msg,
.agree-agreement,
.bind-mobile-number {
	text-align: center;
}

.head-bottom-msg {
	color: #9CA5B4;
}

.head-portrait {
	background: url(./image/circle.png) no-repeat;
	background-position-x: center;
	background-size: auto 100%;
	margin-top: 1rem;
	height: 2rem;
	line-height: 2rem;
	position: relative;
}

.head-portrait img {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.input-verification-code,
.account-input {
	height: 1rem;
}

.account-input {
	margin-top: 1rem;
	background: url(./image/account-input-bg.png) no-repeat;
	background-position: center;
	background-size: 80% auto;
}

.input-verification-code {
	background: url(./image/psw-input-bg.png) no-repeat;
	background-position: center;
	background-size: 80% auto;
	position: relative;
}

.account-input input,
.input-verification-code input {
	border: none;
	outline: none;
	background: none;
	line-height: 1rem;
	font-size: .3rem;
	box-sizing: border-box;
	margin-left: 22%;
	color: #fff;
	width: 3.3rem;
}

.phone-input-remove {
	top: 0.35rem;
	right: 15%;
	width: 0.35rem;
	height: 0.35rem;
	z-index: 2;
}

.phone-input-remove-img {
	width: 0.35rem;
	height: 0.35rem;
	background: url(./image/close.png) no-repeat;
	-webkit-background-size: 100%;
	background-size: 100%;
}

.agree-agreement img {
	width: .3rem;
	height: .3rem;
}

.select-btn {
	display: inline-block;
}

.agree-agreement-msg {
	margin-left: .2rem;
}

.get-verification-code {
	position: absolute;
	line-height: 1rem;
	right: 14%;
	font-size: .25rem
}

.get-verification-code,
.agreement {
	color: #7EFD95;
}

.bind-mobile-number {
	background-color: #0954BA;
	width: 80%;
	height: .9rem;
	line-height: .9rem;
	border-radius: .45rem;
	margin: .5rem auto;
	color: #F6F6F6;
}


/* 遮罩层 */

.agreement-detail-box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
}

.agree-detail-head {
	position: fixed;
	top: 0;
	border-bottom: 1px solid #7EFD95;
	height: .7rem;
	line-height: .7rem;
	font-weight: bold;
	text-align: center;
	position: relative;
	color: #7EFD95;
}

.agreement-detail-title {
	color: #7EFD95;
}

.agree-detail-head .agreement-detail-close {
	display: inline-block;
	background: url(./image/close.png) no-repeat;
	width: .35rem;
	height: .35rem;
	background-size: 100%;
	background-position: center;
	position: absolute;
	right: .3rem;
	top: 50%;
	right: .3rem;
	transform: translateY(-50%);
}

.agreement-detail {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 75%;
	height: 70%;
	border-radius: .2rem;
	background-color: #284473;
	color: #FCFCFC;
	font-size: .25rem;
	text-align: justify
}

.agreement-detail ul {
	list-style: none;
	box-sizing: border-box;
	padding: 0 .25rem;
	margin: 0;
	overflow: scroll;
	height: 90%;
}

.clickBack {
	color: #91BBF3
}
</style>
